<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, user-scalable=no,
		 initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
		<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
		<style type="text/css">
			@media screen and (max-width: 800px) {
						 body {
							 background-color: red;
						 }
			}
			@media screen and (max-width: 500px) {
						 body {
							 background-color: blue;
						 }
			}
		</style>
	</head>
	<body>
		<!-- 
		 针对不同的谋体类型定义不同的样式
		 @media mediatype and|not|only (media feature) {
			 
		 }
		 （1）mediatype:谋体类型;all（所有设备）、print（打印机）、screen（电脑屏幕，平板电脑，智能手机等）
		 （2）关键字：and|not|only
		 （3）media feature：谋体特性，必须有小括号包含
		 
		 注意:为了省略代码，从小到大的顺序写，px一定不能省略
		 @media screen and (max-width: 499px) {
			 body {
				 background-color: red;
			 }
		 }
		 @media screen and (min-width: 500px) {
		 			 body {
		 				 background-color: blue;
		 			 }
		 }
		 
		 
		 -->
		 
	</body>
</html>
